<template>
  <div id="app">

    <div style="height: 60px; line-height: 60px;background-color: white;margin-bottom: 20px;display: flex">
      <div style="width: 300px">
    <img src="@/assets/logo.png" alt="" style="width: 40px;position: relative; top: 4px; left: 20px;">
    <span style="margin-left: 25px;margin-top: 5px;font-size: 24px;"> 图书管理系统</span>
<!--
  <><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"  class="headimg"></el-avatar>-->
      </div>
      <div style="flex: 1; text-align: right;padding-right: 20px">
        <el-dropdown size="medium">
          <el-button type="primary">{{form.username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item ><div style="width: 80px;height:50px;text-align: center;margin-top: 10px" @click="drawback"> 退出</div></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
    </div>
    <el-container >
      <el-aside width="200px"  >
        <el-menu
            default-active="$route.path"
            :default-openeds="['homev','user','admin','BookList','EditBook','AddBook']"
            router class="el-menu-demo"
            mode="vertical">
          <el-menu-item index="homev">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title" style="font-size: 20px">会员管理</span>
            </template>
          </el-menu-item>

          <el-submenu index="user">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span style="font-size: 20px">会员管理</span>
            </template>
            <el-menu-item index="/AddUser" style="font-size: 20px">会员添加</el-menu-item>
            <el-menu-item index="/Userlist"style="font-size: 20px">会员列表</el-menu-item>
          </el-submenu>
          <el-submenu index="admin">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span style="font-size: 20px">管理员管理</span>
            </template>
            <el-menu-item index="/AddAdmin" style="font-size: 20px">管理员添加</el-menu-item>
            <el-menu-item index="/Adminlist"style="font-size: 20px">管理员列表</el-menu-item>
          </el-submenu>

          <el-submenu index="user">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span style="font-size: 20px">书籍管理</span>
            </template>
            <el-menu-item index="/AddBook" style="font-size: 20px">书籍增加</el-menu-item>
            <el-menu-item index="/BookList"style="font-size: 20px">书籍列表列表</el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>
      <el-container>
        <el-main height="100px">
        </el-main>
        <el-main>
          <router-view/>
        </el-main>

      </el-container>
    </el-container>
    <!-- 侧边栏和主体 -->

  </div>

</template>
<script>
import Cookies from "js-cookie";
export default {
 name:"home",
  data() {

    return {
      form:
       Cookies.get('user') ? JSON.parse(Cookies.get('user')) :
       {
        username:'你好',
        phone:'',
        email:''
      }
    }
  },

  methods:{
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    created() {
      request.get('/admin/'+this.form.id).then(res =>
      {
        this.form=res.data
      })
    },
    drawback()
    {
      Cookies.remove('user');
      // console.log(JSON.parse(Cookies.get('user')));
      this.$router.push('/Login')
    },

  }

}
</script>


<style>
*{
  margin: 0px;
  padding:0px;
  box-sizing: border-box;
}
.app{
  height: auto;
  width: auto;
}
html,body {
  margin: 0;
  height: 100%;
}
.container{
  height: 100%
}
.el-menu{
  height:100%
}

.menu-container {
  width: 200px;
  height: 100%;


}

.el-menu-item {
  line-height: 100px; /* 调整菜单项的行高，即菜单项的高度 */
  margin-bottom: 70px; /* 去掉菜单项之间的默认间距 */

}

.el-menu::after {
  content: "";
  flex: 1;
}

</style>
<!-- 脚本 -->
